<template>
	<view class="animation-fade">
		<uni-nav-bar :fixed="true" @clickLeft="handleBack" title="我的足迹" leftIcon="back" :statusBar="true"></uni-nav-bar>
			<!-- 没有东西 -->
			<view class="canui-kong" v-if="history.length==0&&hasLogin">
			    <view class="bg-yellow padding  shadow-blur canui-kong-icon flex justify-center align-center">
			        <text class="cuIcon-sort text-white"></text>
			    </view>
					 
			    <view class="text-sm  flex justify-center align-center">
			        <text class="text-grey text-lg">此处空空如也~</text>
			    </view>
			</view>
			
			<!-- 没有登录 -->
			<view class="canui-kong" v-if="!hasLogin">
			    <view class="bg-yellow padding  shadow-blur canui-kong-icon flex justify-center align-center">
			        <text class="cuIcon-weixin text-white"></text>
			    </view>
					 
			    <view class="text-sm  flex justify-center align-center">
			        <text class="text-grey text-lg">请先登录~</text>
			    </view>
			</view>
			
			<view class="animation-fade cu-card" style="pointer-events: auto;" v-if="history&&hasLogin">
				<view class="cu-item shadow">
					<view class="cu-card no-card">
					<view  class=" solids-bottom cu-item cf content padding-right-sm" v-for="(item,index) in history" :key="item.isbn" @click="toDetails(index)">
				
						<!-- 左边 -->
						<view  class="fl flex " style="width: fit-content;">	
							<!-- 书本图片 -->
							<view class="image padding">
								<image style="width: 100rpx;height: 150rpx;" :src="item.img"></image>
							</view>
					
						</view>
				
						<!-- 右边 -->
						<view class="">
							<!-- 右边的上面 -->
							<view style="height: 120rpx;" class=" margin-top ">
								<view >
									<view class="text-black" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;">
										<text>{{item.title}}</text>
									</view>
									<view class="text-gray text-sm">{{item.author}}</view>
								</view>	
							</view>
							<view style="" class="flex justify-end ">
									<view class="text-price  text-black text-lg  padding-right-sm padding-bottom-sm">{{item.price}}</view>
							</view>
						</view>
					</view>
					</view>	
				</view>
			
			</view>
			<view class="" style="height:150rpx;"></view>
			
			
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		computed:mapState(['hasLogin']),
		data() {
			return {
				history:[]
			}
		},
		onLoad(){
			this.history=uni.getStorageSync("history");
			// console.log(this.history);
		},
		methods: {
			handleBack(){
				uni.navigateBack({
					
				})
			},
			toDetails(index){
				uni.navigateTo({
					url:'../book_details/book_details?book='+encodeURIComponent(JSON.stringify(this.history[index]))
				});
			}
		}
	}
</script>

<style>
.canui-kong {
		padding-top: 200rpx;
	}
	
	.canui-kong-icon {
		width: 220rpx;
		height: 220rpx;
		/* line-height: 220rpx; */
		margin: 0 auto;
		border-radius: 50%;
		margin-bottom: 30rpx;
	}
	
	.canui-kong-icon text {
		font-size: 115rpx;
	}
	
	.canui-kong .bg-gradual-green {
		margin: 0 auto;
	}
</style>
